<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类页</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div class="fix-title">
    <div class="back">&lt;</div>
    <span>商品列表</span>
    <div class="text"><a href="search.html">搜索</a></div>
  </div>
  <div class="cate-list-fix">
    <ul>
      <!-- <li class="active"><a href="">分类1</a></li>
      <li><a href=""><a href="">分类2</a></li>
      <li><a href=""><a href="">分类3</a></li>
      <li><a href=""><a href="">分类4</a></li>
      <li><a href=""><a href="">分类5</a></li> -->
    </ul>
  </div>
  <div class="good-list">
    <ul>
      <li>
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">
        <h3>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</h3>
        <p>
          <span>￥200.200</span>
          <span>+</span>
        </p>
      </li>
    </ul>
    <div class="empty">
      <span>空空如也...</span>
    </div>
    <p class="desc">数据正在加载中...</p>
    <p class="desc">我也是有底线的...</p>
  </div>
</body>
<script src="../axios.js"></script>
<script>
  // 添加请求拦截器
  axios.interceptors.request.use(
    function (config) {
      // 在发送请求之前做些什么
      const token = localStorage.getItem('token') // 获取存取的token
      if (token) { // 不为空的话就设置进headers
        config.headers['token'] = token
      }
      return config
    },
    function (error) {
      // 对请求错误做些什么
      return Promise.reject(error)
    });

  // 添加响应拦截器
  axios.interceptors.response.use(
    function (response) {
      // 对响应数据做点什么
      return response
    },
    function (error) {
      console.log('请求错误')
      console.dir(error)
      // 对响应错误做点什么
      if (
        error.response &&
        error.response.status &&
        error.response.status === 401
      ) {
        if (error.response.data.message === 'jwt expired') {
          alert('token过期了，请重新登录');
        } else {
          alert('请携带token发生请求');
        }
      }
      return Promise.reject(error)
    });

  // 根路径配置，后续url后地址不需要加根路径
  axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
  const token = localStorage.getItem('token')
  const list = document.querySelector(".cate-list-fix ul")
    // 头部渲染
    ; (async () => {
      const { data: { data } } = await axios({ url: '/goods/cate' })
      console.log(data);
      list.innerHTML = data.map(item => `<li data-id="${item.id}"><a href="javascript:;">${item.name}</a></li>`).join('')
    })()
  // 头部高亮

  list.addEventListener('click', function (e) {
    console.dir(e.target)
    // const { tagName, dataset } = e.target
    if (e.target.tagName === 'A') {
      console.log('点击了A');
      // 排他，有就排，没有就不排
      const old = document.querySelector('.cate-list-fix .active')
      if (old) document.querySelector('.cate-list-fix .active').classList.remove('active')
      // 自添
      e.target.parentNode.classList.add('active')
    }

  })


  // 获取列表数据封装函数
  async function getList() {
    const res = await axios({ url: '/goods' })
    console.log(res)
  }




</script>

</html>